<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>开放平台</title>
	<style>
	.mod_bg{
	font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
	}
.bg_item {
	    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    height: 300px;
    background-repeat: no-repeat;
    background-position: top;
}
.bg1{
	background-image: url(../images/bg_item1.jpg?max_age=25920000);
}
.bg2{
	background-image: url(../images/bg_item2.jpg?max_age=25920000);
}
.bg3{
	background-image: url(../images/bg_item3.jpg?max_age=25920000);
}
.bg4{
	background-image: url(../images/bg_item4.jpg?max_age=25920000);
}
.bg5{
	background-image: url(../images/bg_item5.jpg?max_age=25920000);
}
.bg6{
	background-image: url(../images/bg_item6.jpg?max_age=25920000);
}
.bg7{
	background-image: url(../images/bg_item7.jpg?max_age=25920000);
}
.bg8{
	background-image: url(../images/bg_item8.jpg?max_age=25920000);
}
.wrap{
	    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    max-width: 1920px;
    min-width: 0;
    padding-top: 0;
    margin: 0 auto;
}
.main{
	    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    position: relative;
    z-index: 3;
    margin: 0;
}
.top_box{
	    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    position: relative;
    height: 920px;
    overflow: hidden;
}
.top_box_a{
	    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-decoration: none;
    color: #1a1a1a;
}
.top_box__logo{
	    font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    border: 0;
    position: absolute;
    top: 54px;
    left: 82px;
    width: 160px;
}
.mod_top_login{
	    font-size: 14px;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    position: absolute;
    right: 120px;
    top: 50px;
    line-height: 40px;
    z-index: 10;
}
.top_login__help{
	    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    float: left;
    height: 32px;
    line-height: 32px;
    font-size: 16px;
    margin-top: 5px;
}
.top_login__help__link{
	    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    line-height: 32px;
    font-size: 16px;
    text-decoration: none;
    float: left;
    color: #fff;
    background: hsla(0,0%,84.7%,.2);
    border-radius: 999px;
    padding: 0 12px 0 11px;
    margin-right: 16px;
}
.top_box__tit{
	  line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
    font-weight: 400;
    position: absolute;
    left: 50%;
    font-size: 0;
    background-image: url(../images/qq音乐开放平台.png?max_age=25920000);
    top: 180px;
    z-index: 5;
    width: 432px;
    height: 32px;
    margin-left: -216px;
    background-size: 800px;
    -webkit-transition: .5s ease-in-out;
    opacity: 1;
    -webkit-transform: translateY(0);
    -webkit-transition-delay: .8s;
}
.top_box__desc{
	    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    font-size: 0;
    background-image:url(../images/qq音乐开放平台.png?max_age=25920000);
    top: 180px;
    top: 290px;
    z-index: 5;
    width: 522px;
    height: 226px;
    margin-left: -261px;
    background-size: 800px;
    background-position: 0 -50px;
    -webkit-transition: .5s ease-in-out;
    opacity: 1;
    -webkit-transform: translateY(0);
    -webkit-transition-delay: 1s;
}
/* .top_box__btn{
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-decoration: none;
    color: #1a1a1a;
    position: absolute;
    left: 50%;
    top: 774px;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 260px;
    height: 68px;
    margin-left: -145px;
    font-size:0;
    border-radius: 68px;
    background: #00ed59;
    -webkit-transition: .5s ease-in-out;
    opacity: 1;
    -webkit-transform: translateY(0);
    -webkit-transition-delay: 1.2s;
} */
.nav{
        font-size: 14px;
    line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    color: #1a1a1a;
    position: absolute;
    left: 50%;
    top: 885px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1000px;
    margin-left: -505px;
}
.nav__item{
        line-height: 1.5;
    font-family: Tahoma,\5FAE\8F6F\96C5\9ED1,sans-serif;
    text-decoration: none;
    color: #1a1a1a;
    display: block;
    width: 64px;
    height: 15px;
    margin: 0 40px;
    font-size: 0;
    cursor: pointer;
    background-image: url(../images/开放平台nav.png?max_age=25920000);
    background-repeat: no-repeat;
    background-size: 400px auto;
}    
.item1{
    background-position: 0 -890px;

}
.item2{
    background-position: 0 -920px;
}
.item3{
    background-position: 0 -950px;
}
.item4{
    background-position: 0 -980px;
}
.item5{
    background-position: 0 -1010px;
}
</style>
</head>
<body>
	<div class="mod_bg">
	<div class="bg_item bg1"></div>
	<div class="bg_item bg2"></div>
	<div class="bg_item bg3"></div>
	<div class="bg_item bg4"></div>
	<div class="bg_item bg5"></div>
	<div class="bg_item bg6"></div>
	<div class="bg_item bg7"></div>
	<div class="bg_item bg8"></div>
	</div>
	<div class="wrap">
		<main class="main">
			<header class="top_box">
				<a  class="top_box_a" href="https://y.qq.com">
					<img src="../images/logo2.png" alt="" class="top_box__logo">
				</a>
				<div class="mod_top_login">
					<div class="top_login__help">
						<a href="" class="top_login__help__link">联系客服</a>
						<a href="" class="top_login__help__link">帮助中心</a>
						<a href="" class="top_login__help__link">登录</a>
					</div>
				</div>
				<h1 class="top_box__tit"></h1>
				<p class="top_box__desc">闪耀从这里开始</p>
				<!-- <a href="" class="top_box__btn">立即入驻</a> -->
                <nav class="nav">
                    <a href="" class="nav__item item1">专项流量</a>
                    <a href="" class="nav__item item2">粉丝互动</a>
                    <a href="" class="nav__item item3">数据助力</a>
                    <a href="" class="nav__item item4">作品管理</a>
                    <a href="" class="nav__item item5">创作变现</a>
                </nav>
			</header>
			<div class="mod_part"></div>
			<div class="mod_part"></div>
			<div class="mod_part"></div>
			<div class="mod_part"></div>
			<div class="mod_part"></div>
		</main>
	</div>
</body>
</html>